import React, { useState, useRef } from 'react';
import { StyleSheet, Platform, StatusBar, Animated } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { getActiveRouteName } from '@/utils';
import BottomTabs from './bottom-tabs';
import Category from '@/pages/category';
import Album from '@/pages/album';
import Login from '@/pages/login';
import Detail from '@/pages/detail';
import PlayView from '@/pages/views/play-view';
import History from '@/pages/history';
import ProgramDetail from '@/pages/program-detail'
const ModalStack = createNativeStackNavigator();
const Stack = createNativeStackNavigator();

const styles = StyleSheet.create({
    headerBackground: {
        flex: 1,
        backgroundColor: '#fff',
        opacity: 0,
    },
    headerBackImage: {
        marginHorizontal: Platform.OS === 'android' ? 0 : 8,
    },
});

function getAlbumOptions({ route }) {
    return {
        headerTitle: route.params.item.title,
        headerTransparent: true,
        headerTitleStyle: {
            opacity: route.params.opacity,
        },
        headerBackground: () => {
            return (
                <Animated.View
                    style={[styles.headerBackground, { opacity: route.params.opacity }]}
                />
            );
        },
    };
}

function RootStackScreen() {
    return (
        <Stack.Navigator
            headerMode="float"
            screenOptions={{
                headerTitleAlign: 'center',

                gestureEnabled: true,
                gestureDirection: 'horizontal',
                ...Platform.select({
                    android: {
                        headerStatusBarHeight: StatusBar.currentHeight,
                    },
                }),
                headerBackTitleVisible: false,
                headerTintColor: '#333',
                headerStyle: {
                    ...Platform.select({
                        android: {
                            elevation: 0,
                            borderBottomWidth: StyleSheet.hairlineWidth,
                        },
                    }),
                },
            }}>
            <Stack.Screen
                name="BottomTabs"
                component={BottomTabs}
                options={{
                    headerShown: false,
                    headerTitle: '首页',
                }}
            />
            <Stack.Screen
                name="Category"
                component={Category}
                options={{
                    headerTitle: '分类',
                }}
            />
            <Stack.Screen name="Album" component={Album} options={getAlbumOptions} />
        </Stack.Navigator>
    );
}

function ModalStackScreen() {
    return (
        <ModalStack.Navigator
            mode="modal"
            headerMode="screen"
            screenOptions={{
                headerTitleAlign: 'center',
                gestureEnabled: true,
                headerBackTitleVisible: false,
                headerTintColor: '#333',
            }}>
            <ModalStack.Screen
                name="Root"
                component={RootStackScreen}
                options={{ headerShown: false }}
            />
            <ModalStack.Screen
                name="Detail"
                component={Detail}
                options={{
                    headerTintColor: '#fff',
                    headerTitle: '',
                    headerTransparent: true,
                    cardStyle: { backgroundColor: '#807c66' },
                    headerBackImage: ({ tintColor }) => (
                        <Icon
                            name="icon-down"
                            size={30}
                            color={tintColor}
                            style={styles.headerBackImage}
                        />
                    ),
                }}
            />
            <ModalStack.Screen
                name="Login"
                component={Login}
                options={{
                    headerTitle: '登录',
                }}
            />
            <Stack.Screen
                options={{
                    headerTitle: "历史"
                }}
                name="History"
                component={History}
            ></Stack.Screen>
            <Stack.Screen
                options={{
                    headerTitle: "程序详情"
                }}
                name="ProgramDetail"
                component={ProgramDetail}
            />
        </ModalStack.Navigator>
    );
}
function Navigator() {
    const [routeName, setRouteName] = useState('Root');
    const navigationRef = useRef(null);
    const onStateChange = (state) => {
        if (typeof state !== 'undefined') {
            const routeName = getActiveRouteName(state);
            setRouteName(routeName)
        }
    };

    return (
        <NavigationContainer
            ref={navigationRef}
            onStateChange={onStateChange}>
            <ModalStackScreen />
            <PlayView routeName={routeName} />
        </NavigationContainer>
    );
}
export default Navigator